/**
* 头部菜单
*/
<template>
  <div class="header-container">
    <el-row>
      <el-col :span="10" class="title-logo-container">
<!--        <h1 class="center-text">云南大学软件学院知识图谱实验室</h1>-->
<!--        <img :src="titleLogo" class="title-logo" alt="">-->
      </el-col>
      <el-col :span="14" class="title-img">
        <img :src="titleImg"  alt="">
      </el-col>
    </el-row>
  </div>
  <!-- <el-menu class="el-menu-demo" mode="horizontal" background-color="#fff" text-color="#334157" active-text-color="#13C2C7">
    <el-row justify style="width: 50vh;">
      <el-col :span="4">
        <el-button class="buttonimg">
      <font-awesome-icon class="showimg" :icon="['fas','fa-bars']" @click="toggle(collapsed)" ></font-awesome-icon>
    </el-button>
      </el-col>
    </el-row>
  </el-menu>
    <el-dialog  v-model="EditFormVisible" title="更改密码" style="width: 30vw;text-align: center;">
      <el-form :model="form" >
        <el-form-item label="用户姓名">
          <div>{{ form.name }}</div>
        </el-form-item>
        <el-form-item label="初始密码">
          <div>{{ form.password }}</div>
        </el-form-item>
        <el-form-item label="修改密码">
          <el-input v-model="form.res_password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="重复密码" >
          <el-input v-model="form.new_res_password" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">更新</el-button>
      </span>
      </template>
    </el-dialog> -->
</template>
<script setup>
import { ref ,nextTick,getCurrentInstance,reactive} from 'vue';
import titleLogo from "../assets/img/titleLogo.png"
import titleImg from "../assets/img/titleImg.jpg"
const appContext = getCurrentInstance().appContext;
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
const collapsed = ref(true);
const user = JSON.parse(localStorage.getItem('userdata'));
const toggle = (showtype) => {

  collapsed.value = !showtype;
  // nextTick(()=>{
  //   bus.emit('toggle', collapsed.value);
  // })
  appContext.config.globalProperties.$bus.emit('toggle', collapsed.value)
};
const form = reactive({
  id:'',
  name: '',
  new_password: '',
  res_new_password: ''
})
const EditFormVisible = ref(false)
const editAvator=()=>{
  Object.assign(form, {
    id: 1,
    name: "fjj",
    password: "naxx",
  });
  EditFormVisible.value = true;
}
</script>

<style scoped>
/*//设置标题字体*/
.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left:30px;
  font-size: 24pt;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
}
.submenu {
  margin-left: auto;
}
.buttonimg {
  height: 60px;
  background-color: transparent;
  border: none;
}
.showimg {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 17px;
  left: 17px;
  color: #334157;
}
.showimg:active {
  border: none;

}
.showimg:hover{
  color: #13C2C7;
}
.header-container {
  background-color: white;
  border-bottom: 1px solid green;
  height: 10vh;
  width: 100%;
}

.title-logo-container{
  background-color:white;
  position: relative;
  width: 100%;
  height: 10vh;
  overflow: hidden;
  display: flex;
}
.title-logo {

}
.title-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.title-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  overflow: hidden;
}
.title-img img{
  width: 100%;
  height: 10vh;
  display: block;
  margin: 0 auto;
  position: center;
}
</style>